{% extends "admin/base.html" %}

{% block admin_content %}
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-primary">抽题记录</h6>
        <div>
            <button class="btn btn-primary" onclick="refreshRecords()">
                <i class="bi bi-arrow-clockwise me-1"></i>刷新
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>学号</th>
                        <th>是否重抽</th>
                        <th>题目ID</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="recordsTableBody">
                    {% for record in records %}
                    <tr>
                        <td>{{ record.id }}</td>
                        <td>{{ record.student_id }}</td>
                        <td>
                            {% if record.is_redraw %}
                            <span class="badge bg-warning">是</span>
                            {% else %}
                            <span class="badge bg-success">否</span>
                            {% endif %}
                        </td>
                        <td>{{ record.question_ids }}</td>
                        <td>
                            <button class="btn btn-sm btn-info" onclick="showQuestions('{{ record.id }}')">
                                查看题目
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Questions Modal -->
<div class="modal fade" id="questionsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">抽题详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="questionsList"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>

.table {
    margin-bottom: 0;
}

.table thead th {
    border-bottom: 2px solid #e3e6f0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #5a5c69;
}

.table td {
    vertical-align: middle;
}

.btn {
    border-radius: 5px;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
}

.modal-content {
    border: none;
    border-radius: 10px;
}

.modal-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

.question-item {
    background-color: #f8f9fc;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.question-content {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.answer-content {
    background-color: #e9ecef;
    padding: 0.75rem;
    border-radius: 6px;
    color: #495057;
}
</style>
      <link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
{% endblock %}

{% block scripts %}
<script>
function refreshRecords() {
    location.reload();
}

function showQuestions(recordId) {
    fetch(`/admin/api/draw_records/${recordId}/questions`)
        .then(response => response.json())
        .then(data => {
            const questionsList = document.getElementById('questionsList');
            questionsList.innerHTML = data.questions.map((q, index) => `
                <div class="question-item">
                    <div class="question-content">题目 ${index + 1}：${q.content}</div>
                    <div class="answer-content">答案：${q.answer}</div>
                </div>
            `).join('');
            
            const modal = new bootstrap.Modal(document.getElementById('questionsModal'));
            modal.show();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('获取题目详情失败');
        });
}
</script>
{% endblock %} 